<template>
	<view class="components-theme">
		<!-- 分享 -->
		<button open-type="share" v-if="false">
			<view class="dong">
				<view class="monster">
					<view class="monster__face">
						<view class="monster__eye avatar-eye avatar-eye--green eye--left">
							<view class="avatar-eye-pupil pupil--green"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
						</view>
						<view class="monster__eye avatar-eye avatar-eye--violet eye--right">
							<view class="avatar-eye-pupil pupil--pink"><span class="avatar-eye-pupil-blackThing"><span class="avatar-eye-pupil-lightReflection"></span></span></view>
						</view>
						<view class="monster__noses">
							<view class="monster__nose"></view>
							<view class="monster__nose"></view>
						</view>
						<view class="monster__mouth">
							<view class="monster__top"></view>
							<view class="monster__bottom"></view>
						</view>
					</view>
				</view>
			</view>
		</button>
		
		<!-- 弹窗确认 -->
		<view class="cu-modal" :class="modalName=='Modal'?'show':''">
			<view class="cu-dialog" style="padding: 300rpx 0 70rpx;">
				<view class="modal_bg"></view>
				<view class="modal_main">
					<view class='nav-list margin-top'>
						<view :class="'nav-li bg-zt' + (index+1)" v-for="(item, index) in inter" :key="index" @click="switchImage(index,item.name)">
							<view class="nav-name">{{item.name}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 顶部背景 -->
		<view v-if="merchantDetail" class='UCenter-bg' :style="'background-image: url(' + pic[topBackGroupImageIndex].link + ');margin-top:' + CustomBar + 'px;'">
			<view class='space' v-show="spaceShow">
				<view class="stars ">
					<view class="star "></view>
					<view class="star pink "></view>
					<view class="star blue "></view>
					<view class="star yellow "></view>
				</view>
			</view>
	
			<block>
				<view class='text-center animation-slide-top'  @click="showModal" data-target="Modal" v-if="merchantDetail" :style="[{animationDelay: '0.1s'}]">
					<view class="cu-avatar2 round xl margin-right-sm shadow-blur-lg bg-img open-data"
						style="overflow: hidden;">
						<image src="https://mini.wm-mis.com/img/static/merchant1.jpeg" style="width: 100%; height: 100%;"></image>
					</view>
					<view class="padding text-blue text-xl text-bold">
						{{merchantDetail.name}}
					</view>
				</view>
			</block>
	
			<image src='https://mini.wm-mis.com/img/static/me/wave.gif' mode='scaleToFill' class='gif-wave'></image>
		</view>
	    
		<block v-if="merchantDetail">
			<!-- 顶部文字 -->
			<view class='padding flex text-center text-grey bg-white shadow-warp-my' style="padding-top: 10rpx;">
				<view class='flex flex-sub flex-direction animation-slide-top' :style="[{animationDelay: '0.1s'}]">
					<view class="margin-top-sm" style="text-align: left;">
						<text class='cuIcon-locationfill'></text> {{merchantDetail.provinceText ? merchantDetail.provinceText : ''}}{{merchantDetail.cityText ? merchantDetail.cityText : ''}}{{merchantDetail.areaText ? merchantDetail.areaText : ''}}{{merchantDetail.address ? merchantDetail.address : ''}}</view>
				</view>
			</view>
			
			<!-- 导航 -->
			<view class="cu-list menu card-menu margin-top-lg shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.1s'}]">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/chucuo.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>营业执照</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{merchantDetail.licenseNumber ? merchantDetail.licenseNumber : ''}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.2s'}]">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/youjian.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>联系人</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{merchantDetail.name ? merchantDetail.name : ''}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.3s'}]" data-number="13866669999" @click="callPhoneNumber">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/xiaoxi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>联系电话</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-blue light">{{merchantDetail.mobile ? merchantDetail.mobile : ''}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.4s'}]">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/tupian.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>营业状态</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light" v-if="merchantDetail.status == 'NORMAL'">正常</view>
						<view class="cu-tag round bg-orange light" v-if="merchantDetail.status != 'NORMAL'">停业</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.5s'}]">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/yingshi.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>所属行业</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{merchantDetail.industryText ? merchantDetail.industryText : ''}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.6s'}]" @click="toScale">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/jiankong.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>商户规模</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{showScale(merchantDetail.shopScale)}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: '0.7s'}]" v-if="merchantDetail.shouyunCompany">
					<view class='content'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/tianqi.png' class='png' mode='aspectFit'></image>
						<text class='text-df margin-sm' style="font-size: 26rpx;">隔油池清捞单位</text>
					</view>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{shouyunCompanyLabel(merchantDetail.shouyunCompany)}}</view>
					</view>
				</view>
			</view>
			<view class="cu-list menu card-menu margin-bottom-lg shadow-shop bg-white text-black my-radius sm-border">
				<view class="cu-item animation-slide-bottom" :style="[{animationDelay: (0.8+0.1*(index+1)) + 's'}]" v-for="(item, index) in merchantDetail.wvpContracts" :key="item.id">
					<button class='content cu-btn' style="text-align: left;">
						<image src='https://mini.wm-mis.com/img/static/me/icon/diannao.png' class='png' mode='aspectFit'></image>
						<text class='text-df margin-sm'>{{ item.contractName }}</text>
					</button>
					<view class='action'>
						<view class="cu-tag round bg-green light">{{item.beginDate}}--{{item.endDate}}</view>
					</view>
				</view>
				<view class="cu-item animation-slide-bottom arrow" :style="[{animationDelay: (0.9 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="scan">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/shouji.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>扫一扫</text>
					</button>
					<view class='action'>
						<view class="cu-tag round bg-green light">切换商户</view>
					</view>
				</view>
				<view v-if="token" class="cu-item animation-slide-bottom arrow" :style="[{animationDelay: (1 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="scanBind">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/bianqian.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>绑定商户二维码</text>
					</button>
					<view class='action'>
						
					</view>
				</view>
				<view v-if="token" class="cu-item animation-slide-bottom arrow" :style="[{animationDelay: (1 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="cardBind">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/qiabao.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>绑定RFID卡</text>
					</button>
					<view class='action'>
						
					</view>
				</view>
				
				<view v-if="!token" class="cu-item animation-slide-bottom arrow" :style="[{animationDelay: (1 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="toLogin">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/dengta.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>登录</text>
					</button>
					<view class='action'>
						
					</view>
				</view>
				<view v-if="token" class="cu-item animation-slide-bottom arrow" :style="[{animationDelay: (1.1 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="toMe">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/dengta.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>我的</text>
					</button>
					<view class='action'>
						
					</view>
				</view>
				<view v-if="token" class="cu-item animation-slide-bottom" :style="[{animationDelay: (1.2 + 0.1*merchantDetail.wvpContracts.length) + 's'}]" @click="logout">
					<button class='content cu-btn'>
						<image src='https://mini.wm-mis.com/img/static/me/icon/lvhang.png' class='png' mode='aspectFit'></image>
						<text class='text-lg margin-sm'>退出</text>
					</button>
					<view class="action">
						
					</view>
				</view>
			</view>
		</block>
	
		<view style="height: 110rpx;width: 1rpx;"></view>
		<!-- 加载弹窗 -->
		<view class="cu-load load-modal" v-if="loading">
			<!-- <view class="cuIcon-emojifill text-orange"></view> -->
			<image src="https://mini.wm-mis.com/img/static/car.png" mode="aspectFit" class="round"></image>
			<view class="gray-text">加载中...</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api'
	import { mapActions, mapState } from "vuex"
	export default {
		name: "people",
		computed: {
			...mapState([
				'merchant',
				'token',
				'scene',
				'dicts'
			])
		},
		data() {
			return {
				spaceShow:true,
				modalName: null,
				picName: '清爽夏日',
				pic: [
					{
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg1.jpg',
						name: '春天'
					}, {
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg2.jpg',
						name: '夏天'
					}, {
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg3.jpg',
						name: '秋天'
					}, {
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg4.jpg',
						name: '冬天'
					}, {
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg5.jpg',
						name: '幽静'
					}, {
						link: 'https://mini.wm-mis.com/img/static/me/zjx_me_bg6.jpg',
						name: '天空'
					}

				],
				topBackGroupImageIndex: 1,
				inter: [
						{
						title: 'mimicry',
						name: '活力春天',
						color: ''
					}, {
						title: 'theme',
						name: '清爽夏日',
						color: ''
					}, {
						title: 'theme',
						name: '金秋之韵',
						color: ''
					}, {
						title: 'theme',
						name: '冬日之阳',
						color: ''
					}, {
						title: 'theme',
						name: '幽兰星空',
						color: ''
					}, {
						title: 'theme',
						name: '流星之夜',
						color: ''
					},
				],
				merchantColumns:[],
				merchantShow: false,
				defaultMerchantIndex: [0],
				merchantDetail: null,
				merchantId: null,
				loading: false
			};
		},
		watch: {
			topBackGroupImageIndex(val) {
				console.log(val)
				if (val == 4 || val == 5 ) {
					this.spaceShow = true;
				}
				else{
					this.spaceShow = false;
				}
			}
		},
		methods: {
			...mapActions([ "Logout"]),
			switchImage(index, name) {
				this.topBackGroupImageIndex = index;
				this.modalName = null;
				this.picName = name;
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//拨打固定电话
			callPhoneNumber() {
				uni.makePhoneCall({
					phoneNumber: this.merchantDetail.mobile,
				});
			},
			toMe(){
				uni.navigateTo({
					url: '/pages/user/userdetail'
				})
			},
			toScale(){
				uni.navigateTo({
					url: '/pages/merchants/scale?item=' + JSON.stringify(this.merchantDetail)
				})
			},
			toLogin(){
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			async logout(){
				await this.Logout();
				uni.clearStorageSync();
				uni.reLaunch({
					url: '/pages/login/login'
				})
			},
			scan(){
				let that = this
				uni.scanCode({
				    success: async (res) => {
						console.log("000000000000");
						console.log(res);
						let arr = res.path.split("scene=")
						if(arr.length == 2){
							that.$store.dispatch('setScene', {
								scene: arr[1]
							});
							that.loading = true
							await that.getMerchantDetail()
							that.loading = false
						}
				    }
				});
			},
			scanBind(){
				let that = this
				uni.scanCode({
				    success: async (res) => {
						console.log("11111111111111");
						console.log(res);
						let arr = res.path.split("scene=")
						if(arr.length == 2){
							uni.navigateTo({
								url: '/pages/merchants/bind?minicode=' + arr[1]
							})
						}
				    }
				});
			},
			cardBind(){
				uni.navigateTo({
					url: '/pages/rfid/list'
				});
			},
			async getMerchants(){
				//没有登录
				if(!this.token){
					return;
				}
				
				//有商户扫码信息（商户为空时其他页面扫码）
				if(this.scene){
					return;
				}
				
				let that = this
				let res = await api.shopList({
					pageSize: 9999,
					pageNo: 1
				})
				if(res.data.code == 200 && res.data.success){
					//商户信息为空，跳转到其他页面扫码添加商户
					if(res.data.result.records.length == 0){
						uni.reLaunch({
							url: '/pages/user/notfound'
						})
						return;
					}
					
					let tmpList = [];
					for(let item of res.data.result.records){
						tmpList.push({
							name: item.name,
							id: item.id,
							orgCode: item.orgCode
						})
					}
					that.merchantColumns = [tmpList]
					//如果没有商户信息，默认选中第一个商户
					if(!that.merchant){
						that.merchantDetail = res.data.result.records[0]
						that.$store.dispatch('setMerchant', {
							merchant: tmpList[0]
						});
					}
				}
			},
			async getMerchantDetail(){
				let that = this
				let res = null
				if(!that.merchant && !that.scene){
					return;
				}
							
				
				//如果是扫描二维码进来的
				if(that.scene){
					//定时清空
					setTimeout(()=>{
						that.$store.dispatch('setScene', {
							scene: ''
						});
					}, 5000)
					res = await api.shopDetailMiniCode({
						id: that.scene
					})
				}
				else if(that.merchant){
					//如果有商户
					that.merchantId = that.merchant.id
					res = await api.shopDetailNoAuth({
						id: that.merchantId
					})
				}
				
				if(res.data.code == 200 && res.data.success){
					that.merchantDetail = res.data.result
					//更新商户信息
					that.$store.dispatch('setMerchant', {
						merchant: {
							id: that.merchantDetail.id,
							name: that.merchantDetail.name,
							orgCode: that.merchantDetail.orgCode,
							fluegasStatus: that.merchantDetail.fluegasStatus
						}
					});
				}
				else{
					uni.showToast({
						icon: 'none',
						title: res.data.message,
						duration: 3000
					})
					
					setTimeout(()=>{
						uni.reLaunch({
							url: '/pages/user/notfound'
						})
					}, 3000)
				}
			},
			showScale(scale){
				if(scale == 'SMALL'){
					return '小型'
				}
				else if(scale == 'MEDIUM'){
					return '中型'
				}
				else if(scale == 'BIG'){
					return '大型'
				}
				else{
					return ''
				}
			},
			shouyunCompanyLabel(val){
				let text;
				for(let item of this.dicts.shouyun_company){
					if(item.value == val){
						text = item.label
						break
					}
				}
				return text
			}
		},
		async mounted(){
			this.loading = true
			await this.getMerchants()
			await this.getMerchantDetail()
			this.loading = false
		}
	}
</script>

<style lang="scss" scoped>
	.UCenter-bg {
		background: #fff;
		background-size: 100% 100%;
		/* background-size: cover; */
		height: 460rpx;
		display: flex;
		justify-content: center;
		padding-top: 40rpx;
		overflow: hidden;
		position: relative;
		flex-direction: column;
		align-items: center;
		color: #fff;
		font-weight: 300;
		text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
	}
	
	.UCenter-bg text {
		opacity: 0.8;
	}
	
	.UCenter-bg image {
		width: 200rpx;
		height: 200rpx;
	}
	
	.UCenter-bg .gif-wave {
		position: absolute;
		width: 100%;
		bottom: 0;
		left: 0;
		z-index: 99;
		mix-blend-mode: screen;
		height: 100rpx;
	}
	
	// 头像
	.cu-avatar2 {
		font-variant: small-caps;
		margin: 0;
		padding: 0;
		display: inline-flex;
		text-align: center;
		justify-content: center;
		align-items: center;
		background: #ccc;
		color: #fff;
		white-space: nowrap;
		position: relative;
		width: 150rpx;
		height: 150rpx;
		background-size: cover;
		background-position: center;
		vertical-align: middle;
		font-size: 1.5em;
		z-index: 99;
	}
	
	.name {
		text-shadow: 2px 2px 1px #2f9bfe;
	}
	
	.dialog2 {
		background: none;
	}
	
	.saicode {
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
	}
	
	.img-big image {
		top: -40px;
		width: 280rpx;
		height: 280rpx;
	}
	
	.shadow-me {
		box-shadow: 0rpx 0rpx 100rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	
	.tn-footerfixed {
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.35);
	}
	
	.my_logo {
		background: none;
		padding: 50rpx 0 30rpx 0;
	}
	
	.my-radius {
		border-radius: 12rpx;
		overflow: hidden
	}
	
	.my-icon image {
		width: 100rpx;
		height: 100rpx;
		display: inline-block;
		margin: 0 auto
	}
	
	.my-iconcolor {
		background: rgba(255, 255, 255, 0.96)
	}
	
	.shadow-shop {
		box-shadow: 0rpx 0rpx 90rpx 0rpx rgba(0, 0, 0, 0.1);
	}
	
	.qrcode-img {
		position: fixed;
		width: 80rpx;
		height: 80rpx;
		bottom: 350rpx;
		right: 30rpx;
		z-index: 1024;
		opacity: 0.8;
		box-shadow: 0rpx 8rpx 30rpx 0rpx rgba(0, 0, 0, 0.3);
		border: none
	}
	
	/* 数字背景 */
	.shadow-warp-my {
		position: relative;
		box-shadow: 0 10rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.shadow-warp-my:before,
	.shadow-warp-my:after {
		position: absolute;
		content: "";
		top: 20rpx;
		bottom: 30rpx;
		left: 20rpx;
		width: 50%;
		box-shadow: 0 30rpx 20rpx rgba(0, 0, 0, 0.16);
		transform: rotate(-6deg);
		z-index: -1;
	}
	
	.shadow-warp-my:after {
		right: 20rpx;
		left: auto;
		transform: rotate(6deg);
	}
	
	.bg-product {
		background-image: linear-gradient(rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0));
		color: #fff;
	}
	
	.margin-bottom-my {
		margin-bottom: 150rpx;
	}
	.giteeClass{
		margin-top: 30rpx;
		font-size: 34rpx;
		color: #2440B3;
		text-decoration: underline;
	}
	.cu-dialog {
		background: #FFFFFF;
		overflow: visible;
	}
	
	.modal_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: -100rpx;
		background-image: url();
		background-size: 100%;
		background-repeat: no-repeat;
	}
	
	.modal_main {
		background-color: #FFFFFF;
	}
	
	/* 主题色 */
	.bg-zt1 {
		color: #fff;
		background: #81d949;
	}
	
	.bg-zt2 {
		color: #fff;
		background: #b2e6ff;
	}
	
	.bg-zt3 {
		color: #fff;
		background: #f3cd41;
	}
	
	.bg-zt4 {
		color: #fff;
		background: #ddecf7;
	}
	
	.bg-zt5 {
		color: #fff;
		background: #152e9d;
	}
	
	.bg-zt6 {
		color: #fff;
		background: #0f1358;
	}
	
	.nav-list {
		display: flex;
		flex-wrap: wrap;
		padding: 0px 40upx 0px;
		justify-content: space-between;
	}
	
	.nav-li {
		padding: 22upx;
		border-radius: 12upx;
		width: 45%;
		margin: 0 2.5% 40upx;
		background-image: url(../../static/me/NyU04x.png);
		background-size: cover;
		background-position: center;
		position: relative;
		z-index: 1;
	}
	
	.nav-li::after {
		content: "";
		position: absolute;
		z-index: -1;
		background-color: inherit;
		width: 100%;
		height: 100%;
		left: 0;
		bottom: -10%;
		border-radius: 10upx;
		opacity: 0.2;
		transform: scale(0.9, 0.9);
	}
	
	.nav-li.cur {
		color: #fff;
		background: rgb(94, 185, 94);
		box-shadow: 4upx 4upx 6upx rgba(94, 185, 94, 0.4);
	}
	
	.nav-name {
		font-size: 28upx;
		text-transform: Capitalize;
		position: relative;
	}
	
	.nav-name::before {
		content: "";
		position: absolute;
		display: block;
		width: 40upx;
		height: 6upx;
		background: #fff;
		bottom: 0;
		right: 0;
		opacity: 0.5;
	}
	
	.nav-name::after {
		content: "";
		position: absolute;
		display: block;
		width: 100upx;
		height: 1px;
		background: #fff;
		bottom: 0;
		right: 40upx;
		opacity: 0.3;
	}
	
	.nav-name::first-letter {
		font-weight: bold;
		font-size: 36upx;
		margin-right: 1px;
	}
	
	.nav-li text {
		position: absolute;
		right: 30upx;
		top: 30upx;
		font-size: 52upx;
		width: 60upx;
		height: 60upx;
		text-align: center;
		line-height: 60upx;
	}
	
	// 好玩动态
	.dong {
		z-index: 9999;
		position: fixed;
		top: -40px;
		right: -80px;
		transform: scale(0.24);
		-webkit-transform: scale(0.24);
		-moz-transform: scale(0.24);
	
	}
	
	.monster {
		transform: rotate(-50deg);
		-ms-transform: rotate(-50deg);
		/* IE 9 */
		-moz-transform: rotate(-50deg);
		/* Firefox */
		-webkit-transform: rotate(-50deg);
		/* Safari 和 Chrome */
		-o-transform: rotate(-50deg);
		/* Opera */
		display: flex;
		justify-content: center;
		position: relative;
		width: 170px;
		height: 400px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		background-color: #3C47D7;
		box-shadow: 20px 20px 60px #4650E5;
	}
	
	.monster__face {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		top: 14%;
		width: 75%;
		height: 160px;
	}
	
	.monster__noses {
		top: 50%;
		display: flex;
		justify-content: space-between;
		width: 28%;
		height: auto;
		margin-bottom: 10px;
	}
	
	.monster__nose {
		width: 8px;
		height: 12px;
		border-radius: 20px;
		background: rgba(0, 0, 0, 0.5);
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.1);
	}
	
	.monster__mouth {
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		width: 100%;
		height: 0%;
		overflow: hidden;
		border: 25px solid #FFC333;
		border-radius: 100px;
		background-color: #810332;
		animation: mouth 1.75s infinite;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		box-sizing: border-box;
	}
	
	.monster__mouth::before {
		content: '';
		position: absolute;
		width: 150px;
		height: 80px;
		border-radius: 100px;
		background-color: #400018;
	}
	
	.monster__mouth::after {
		content: '';
		position: absolute;
		bottom: -80px;
		width: 160px;
		height: 80px;
		border-top-left-radius: 50%;
		border-top-right-radius: 50%;
		background-color: #DC1B50;
		animation: tongue 1.75s infinite;
	}
	
	.monster__top {
		position: absolute;
		top: -30px;
		width: 170px;
		height: 30px;
		border-bottom-left-radius: 10px;
		border-bottom-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: t 1.75s infinite;
	}
	
	.monster__bottom {
		position: absolute;
		bottom: 0;
		width: 100px;
		height: 30px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		background-color: #ffffff;
		z-index: 100;
		animation: b 1.75s infinite;
	}
	
	.avatar-eye {
		position: absolute;
		top: -10%;
		width: 65px;
		height: 65px;
		background: linear-gradient(105deg, white, #cb87f4);
		border-radius: 100%;
		box-shadow: 4px 8px 5px rgba(0, 0, 0, 0.2);
		margin: 3px;
		-webkit-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	
	.avatar-eye--green {
		background: linear-gradient(to bottom, #fdfdfd, #c3efea);
	}
	
	.avatar-eye--violet {
		background: linear-gradient(to bottom, #fdfdfd, #e6d6f6);
	}
	
	.eye--left {
		left: 10%;
	}
	
	.eye--right {
		left: 85%;
	}
	
	.eye--center {
		left: 45%;
		top: 10%;
	}
	
	.avatar-eye-pupil {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		z-index: 100;
		border-radius: 100%;
	}
	
	.pupil--green {
		background: linear-gradient(135deg, rgba(188, 248, 177, 0.7), #2fa38c 75%);
	}
	
	.pupil--pink {
		background: linear-gradient(135deg, #f1a183, #8535cd);
	}
	
	.avatar-eye-pupil-blackThing {
		position: absolute;
		width: 55%;
		height: 55%;
		left: 50%;
		top: 25%;
		background: #2c2f32;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
	}
	
	.avatar-eye-pupil-lightReflection {
		position: absolute;
		width: 7px;
		height: 7px;
		left: 25%;
		top: 10%;
		background: #ebebeb;
		-webkit-transform: translate(-50%);
		transform: translate(-50%);
		border-radius: 100%;
		box-shadow: 10px 10px 10px rgba(255, 255, 255, 0.2);
	}
	
	/**/
	@keyframes t {
	
		0%,
		10%,
		80%,
		100% {
			top: -30px;
		}
	
		20% {
			top: 0px;
		}
	
		30% {
			top: -20px;
		}
	
		40% {
			top: -0px;
		}
	
		50% {
			top: -25px;
		}
	
		70% {
			top: 0px;
		}
	}
	
	@keyframes b {
	
		0%,
		10%,
		80%,
		100% {
			bottom: -30px;
		}
	
		20% {
			bottom: 0px;
		}
	
		30% {
			bottom: -20px;
		}
	
		40% {
			bottom: -0px;
		}
	
		50% {
			bottom: -25px;
		}
	
		70% {
			bottom: 0px;
		}
	}
	
	@keyframes mouth {
	
		0%,
		10%,
		100% {
			width: 100%;
			height: 0%;
		}
	
		15% {
			width: 90%;
			height: 30%;
		}
	
		20% {
			width: 50%;
			height: 70%;
		}
	
		25% {
			width: 70%;
			height: 70%;
		}
	
		30% {
			width: 80%;
			height: 60%;
		}
	
		35% {
			width: 60%;
			height: 70%;
		}
	
		40% {
			width: 55%;
			height: 75%;
		}
	
		45% {
			width: 50%;
			height: 90%;
		}
	
		50% {
			width: 40%;
			height: 70%;
		}
	
		55% {
			width: 70%;
			height: 95%;
		}
	
		60% {
			width: 40%;
			height: 50%;
		}
	
		65% {
			width: 100%;
			height: 60%;
		}
	
		70% {
			width: 100%;
			height: 70%;
		}
	
		75% {
			width: 90%;
			height: 70%;
		}
	
		80% {
			width: 50%;
			height: 70%;
		}
	
		85% {
			width: 90%;
			height: 50%;
		}
	
		85% {
			width: 40%;
			height: 70%;
		}
	
		90% {
			width: 90%;
			height: 30%;
		}
	
		95% {
			width: 100%;
			height: 10%;
		}
	}
	
	@keyframes tongue {
	
		0%,
		20%,
		100% {
			bottom: -80px;
		}
	
		30%,
		90% {
			bottom: -40px;
		}
	
		40% {
			bottom: -45px;
		}
	
		50% {
			bottom: -50px;
		}
	
		70% {
			bottom: -80px;
		}
	
		90% {
			bottom: -40px;
		}
	}
	
	// 顶部流星
	.space {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.planet {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		background: #333;
		position: absolute;
		left: 50%;
		top: 50%;
		margin: -75rpx 0 0 -75rpx;
		overflow: hidden;
		z-index: 2;
	}
	
	.planet_shadow {
		position: absolute;
		border-radius: 50%;
		height: 100%;
		width: 100%;
		top: -40%;
		right: -10%;
		border: 35rpx solid rgba(0, 0, 0, .15);
	}
	
	.star {
		display: block;
		width: 5rpx;
		height: 5rpx;
		border-radius: 50%;
		background: #FFF;
		top: 100rpx;
		left: 400rpx;
		position: relative;
		transform-origin: 100% 0;
		animation: star-ani 6s infinite ease-out;
		box-shadow: 0 0 5rpx 5rpx rgba(255, 255, 255, .3);
		opacity: 0;
		z-index: 2;
	}
	
	.star:after {
		content: '';
		display: block;
		top: 0rpx;
		left: 4rpx;
		border: 0rpx solid #fff;
		border-width: 0rpx 90rpx 2rpx 90rpx;
		border-color: transparent transparent transparent rgba(255, 255, 255, .3);
		transform: rotate(-45deg) translate3d(1rpx, 3rpx, 0);
		box-shadow: 0 0 1rpx 0 rgba(255, 255, 255, .1);
		transform-origin: 0% 100%;
		animation: shooting-ani 3s infinite ease-out;
	}
	
	.pink {
		top: 30rpx;
		left: 395rpx;
		background: #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}
	
	.pink:after {
		border-color: transparent transparent transparent #ff5a99;
		animation-delay: 5s;
		-webkit-animation-delay: 5s;
		-moz-animation-delay: 5s;
	}
	
	.blue {
		top: 35rpx;
		left: 432rpx;
		background: cyan;
		animation-delay: 7s;
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
	}
	
	.blue:after {
		/* border-color: transpareanimation-delay: 12s; */
		-webkit-animation-delay: 7s;
		-moz-animation-delay: 7s;
		animation-delay: 7s;
	}
	
	.yellow {
		top: 50rpx;
		left: 600rpx;
		background: #ffcd5c;
		animation-delay: 5.8s;
	}
	
	.yellow:after {
		border-color: transparent transparent transparent #ffcd5c;
		animation-delay: 5.8s;
	}
	
	@keyframes star-ani {
		0% {
			opacity: 0;
			transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
			-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
		}
	
		50% {
			opacity: 1;
			transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-200rpx, 200rpx, 0);
		}
	
		100% {
			opacity: 0;
			transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-webkit-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
			-moz-transform: scale(1) rotate(0) translate3d(-300rpx, 300rpx, 0);
		}
	}
</style>
